<template>
  <div>
    <SearchForm
      v-model:form-data="form"
      @search="handleSearch"
    />
    <PaginationCard
      v-model:currentPage="paginationData.currentPage"
      v-model:pageSize="paginationData.pageSize"
      :load-list="getTableData"
      :total="paginationData.total"
    >
      <AppTable
        :data="tableData"
        :columns="columns"
        border
      />
    </PaginationCard>
  </div>
</template>

<script lang="tsx" setup>
import SearchForm from './SearchForm.vue'
// import SecurityLogTable from './SecurityLogTable.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import AppTable from '@/components/AppTable/index.vue'
import { getSecurityLog } from '@/http/securityLog'
import { onMounted, reactive, ref } from 'vue'
import { ISecurity } from '@/http/types/securityLog'
import { parseDate2Str } from '@/utils/timeUtils'

const columns = ref([
  { label: 'Identity', prop: 'identity' },
  { label: 'action', prop: 'action' },
  { label: 'UserId', prop: 'userId' },
  { label: 'UserName', prop: 'userName' },
  { label: 'ClientId', prop: 'clientId' },
  { label: 'ClientIpAddress', prop: 'clientIpAddress' },
  { label: 'CorrelationId', prop: 'correlationId' },
  { label: 'CreationTime', prop: 'CreationTime', formatter: (row: ISecurity) => parseDate2Str(row.creationTime, 'YYYY-MM-DD HH:mm:ss') },
  {
    label: 'BrowserInfo',
    fixed: 'right',
    render: ({ row }:{row:ISecurity}) => {
      return <el-tooltip
                class="item"
                effect="dark"
                placement="top"
                v-slots={{
                  content: () => <div style="width:400px">{row.browserInfo}</div>
                }}
              >
                <p class="browserInfo">
                  { row.browserInfo }
                </p>
             </el-tooltip>
    }
  }
])

interface IFormData{
  identity:string
  logAction:string
  userId: string
  userName: string
  clientId: string
  correlationId: string
  date: [string | Date, string | Date] | null
  sorting: string
}
const form = ref<IFormData>({
  identity: '',
  logAction: '',
  userId: '',
  userName: '',
  clientId: '',
  correlationId: '',
  date: ['', ''],
  sorting: ''
})

const tableData = ref<ISecurity[]>([])

onMounted(() => {
  getTableData()
})
const paginationData = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
})
const getTableData = async () => {
  const params = {
    identity: form.value.identity,
    logAction: form.value.logAction,
    userId: form.value.userId,
    userName: form.value.userName,
    clientId: form.value.clientId,
    correlationId: form.value.correlationId,
    startTime: form.value.date ? form.value.date[0] : '',
    endTime: form.value.date ? form.value.date[1] : '',
    sorting: ''
  }
  const res = await getSecurityLog(paginationData.currentPage, paginationData.pageSize, params)
  tableData.value = res.items
  paginationData.total = res.totalCount
}

const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
  :deep(.browserInfo){
    @include ellipsis(3);
  }
</style>
